<template>
  <div class="hezi">
    <div class="anniu">
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-top: 30px;"
        @click="xinjianbtn"
      >新建</el-button>
      <el-button icon="el-icon-minus" @click="del">删除</el-button>
      <el-button
        type="primary"
        icon="
         el-icon-refresh-right"
        @click="shuaxin"
      >刷新</el-button>
      <el-button type="primary" style="margin-left: 680px;">导入单位</el-button>
    </div>
    <div class="anniu xiala">
      <el-input v-model="chaxunshuju" style="width: 200px;" placeholder="编码/名称" />
      <el-button type="primary" style="margin-left: 10px;" @click="chaxun">查询</el-button>
      <el-button @click="chongzhi">重置</el-button>
    </div>
    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="单位编码" width="120">
          <template v-slot="{row}">{{ row.Code }}</template>
        </el-table-column>
        <el-table-column label="单位名称" width="100">
          <template v-slot="{ row }"> {{ row.Name }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="bianji(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="open(scope.row.Id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :title="biaotou"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form :model="form" class="flex-container" :rules="rules">
        <el-form-item ref="ruleForm" label="货位编号" :label-width="formLabelWidth" class="flex-item">
          <el-input disabled autocomplete="off" width="40%" placeholder="系统自动生成" />
        </el-form-item>
        <el-form-item prop="Name" label="单位名称" :label-width="formLabelWidth" class="flex-item">
          <el-input v-model="form.Name" width="40%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button v-if="biaotou === '新增单位'" type="primary" @click="xinzengBtn">确定新增</el-button>
        <el-button v-else type="primary" @click="bianjiBtn">确定编辑</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetDataList, chaxunList, DeleteData, SaveData } from '@/api/jiliangDanwei'
export default {
  name: 'JiLiangDanWei',
  data() {
    return {
      form: {
        Name: ''
      },
      biaotou: '',
      formLabelWidth: '120px',
      dialogVisible: false, // 控制表单
      list: [], // 循环的列表
      chaxunshuju: '', // 查询输入框的内容
      danxuankuangnirong: [], // 单选框选中的内容
      shanchuid: [],
      morenshuju: { // 基础参数
        PageIndex: 1,
        PageRows: 10,
        SortField: 'Id',
        SortType: 'asc',
        Search: {
          Keyword: ''
        }
      },
      rules: {
        Name: {
          required: true, message: '请输入单位名称', trigger: 'blur'
        }
      }

    }
  },
  created() {
    console.log('页面刷新')
    this.huoqulist()
  },
  methods: {
    // 点击确定编辑时
    async bianjiBtn() {
      console.log('点击了确定编辑')
      console.log(this.form)
      await SaveData(this.form)
      this.$message({
        message: '编辑成功',
        type: 'success'
      })
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.shuaxin()
    },
    quxiao() {
      console.log('点击了取消')
      this.dialogVisible = false
      this.form = {}
    },
    // 点击新增
    async xinzengBtn() {
      console.log('我点击了新增')
      console.log(this.form.Name)
      await SaveData({ Name: this.form.Name })
      this.$message({
        message: '添加成功',
        type: 'success'
      })
      this.dialogVisible = false
      this.form.Name = ''
      // this.$refs.form.resetFields()
      this.huoqulist()
    },
    // 点击编辑
    bianji(row) {
      console.log('点击了编辑')
      this.dialogVisible = true
      this.biaotou = '编辑单位'
      console.log(row)
      this.form.Name = row.Name
      this.form = row
    },
    // 点击新建
    xinjianbtn() {
      console.log('点击了新建')
      this.dialogVisible = true
      this.biaotou = '新增单位'
    },
    // 获取表单数据列表
    async huoqulist() {
      const res = await GetDataList(this.morenshuju)
      console.log(res)
      this.list = res
    },
    // 查询方法 点击查询时
    async chaxun() {
      console.log(this.morenshuju)
      console.log(this.chaxunshuju)
      this.morenshuju.Search.Keyword = this.chaxunshuju
      const res = await chaxunList(this.morenshuju)
      console.log(res)
      this.list = res
      this.huoqulist()
    },
    // 点击重置按钮时
    chongzhi() {
      this.chaxunshuju = ''
    },
    // 刷新页面
    shuaxin() {
      this.huoqulist()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.danxuankuangnirong = val
      // console.log(...this.danxuankuangnirong.map(item => item.Id))
      this.shanchuid = this.danxuankuangnirong.map(item => item.Id)
    },
    // 点击删除时
    async del() {
      await DeleteData(this.shanchuid)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.huoqulist()
    },
    // 表单内删除
    async open(Id) {
      console.log(Id)
      await DeleteData([Id])
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.huoqulist()
    }
  }
}
</script>
<style>
.hezi {
  width: 1400px;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}

.anniu {
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
  height: 50px;
}
.xiala {
  margin-top: 40px;
}
.biaoge {
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
}

</style>
